<template>
	<!-- 上传图片组件 -->
	<view class="body-view">
		<view class="uploads">
			<!-- 图片上传 -->
			<view class="upload-image-view">
				<block v-for="(image, index) in imageList" :key="image.path">
					<view class="image-view">
						<image :src="image" :data-src="image" @tap="previewImage"></image>
						<view class="del-btn" :data-index="index" @tap="deleteImage(index)"><view class="baicha"></view></view>
					</view>
				</block>
				<!--  -->
				<view class="add-view" v-if="imageList.length < imgNum" @tap="chooseImage">
					<view class="cross">
						<view class="transverse-line"></view>
						<view class="vertical-line"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * imgNum
 * sourceType
 * sizeType
 * **/

export default {
	data() {
		return {
			imageList: (this.$store.state.userInfo.product != '' && this.$store.state.userInfo.product != null) ? this.$store.state.userInfo.product : []
		};
	},
	onUnload() {},
	props: {
		imgNum: {
			//限制图片张数
			type: Number,
			default: 30
		},
		sourceType: {
			//['camera'], //拍照 ['album'], //相册 ['camera', 'album'] //拍照或相册
			type: Array,
			default: ['camera', 'album']
		},
		sizeType: {
			//['compressed'], //压缩  ['original'], //原图   ['compressed', 'original'] //压缩或原图
			type: Array,
			default: ['compressed']
		}
	},
	onLoad(opt) {
	},

	methods: {
		//选择图片
		chooseImage: async function() {
			var _this = this;
			uni.chooseImage({
				sourceType: this.sourceType,
				sizeType: this.sizeType,
				count: this.imgNum - this.imageList.length,
				success: res => {
					if (this.imageList.length != 0) {
						this.imageList = this.imageList.concat(res.tempFilePaths);
					} else {
						this.imageList = res.tempFilePaths;
					}
					this.$emit('on-uploadImg', res.tempFilePaths);
				}
			});
		},
		//预览图片
		previewImage: function(e) {
			var current = e.target.dataset.src;
			uni.previewImage({
				current: current,
				urls: this.imageList
			});
		},
		//删除图片
		deleteImage: function(index) {
			uni.showModal({
				title: '删除',
				content: '确定要删除吗？',
				cancelText: '否',
				confirmText: '是',
				success: res => {
					if (res.confirm) {
						this.imageList.splice(index, 1);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
/* 第一套图片上传样式（内部图标相机） */
.upload-image-view {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.upload-image-view .title {
	width: 100%;
	font-family: PingFang-SC-Regular;
	font-size: 24upx;
	color: #4a4a4a;
	margin-bottom: 15upx;
	line-height: 100%;
}

.upload-image-view .info {
	width: 100%;
	font-family: PingFang-SC-Regular;
	font-size: 24upx;
	color: #ff4259;
	height: 24upx;
	margin-top: 15upx;
	line-height: 24upx;
}

.upload-image-view .image-view {
	width: 150upx;
	height: 150upx;
	position: relative;
	margin: 10rpx;
	border-radius: 8upx;
}

.upload-image-view .image-view image {
	height: 100%;
	width: 100%;
	border-radius: 8upx;
}

.upload-image-view .image-view .del-btn {
	background-color: #f67371;
	border-radius: 50%;
	width: 25upx;
	height: 25upx;
	position: absolute;
	top: -12upx;
	right: -12upx;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
}

.upload-image-view .image-view .del-btn .baicha {
	display: inline-block;
	width: 20upx;
	height: 5upx;
	background: #fff;
	line-height: 0;
	font-size: 0;
	vertical-align: middle;
	-webkit-transform: rotate(45deg);
}

.upload-image-view .image-view .del-btn .baicha:after {
	content: '/';
	display: block;
	width: 20upx;
	height: 5upx;
	background: #fff;
	-webkit-transform: rotate(-90deg);
}

.upload-image-view .add-view {
	width: 150upx;
	height: 150upx;
	margin: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0);
	// border: 3upx solid #979797;
	border: 3upx solid #ccc;
	border-radius: 8upx;
}

/* 相机 */

.upload-image-view .add-view .xiangji {
	height: 40upx;
	width: 48upx;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.upload-image-view .add-view .xiangji .tixing {
	width: 10upx;
	height: 7upx;
	background-color: #fff;
	border-right: 10upx solid #fff;
	border-bottom: 7upx solid #b2b2b2;
	border-left: 10upx solid #fff;
}

.upload-image-view .add-view .xiangji .changfx {
	height: 32upx;
	width: 48upx;
	border-radius: 5%;
	background-color: #b2b2b2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.upload-image-view .add-view .xiangji .changfx .yuan1 {
	height: 20upx;
	width: 20upx;
	border-radius: 50%;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.upload-image-view .add-view .xiangji .changfx .yuan2 {
	height: 10upx;
	width: 10upx;
	border-radius: 50%;
	background-color: #b2b2b2;
}

/* 十字架 */
.upload-image-view .add-view .cross {
	height: 48upx;
	width: 48upx;
	display: flex;
	flex-wrap: wrap;
	position: relative;
}

.upload-image-view .add-view .cross .transverse-line {
	height: 100%;
	width: 48%;
	position: absolute;
	// border-right: 3upx solid #5A5A5A;
	border-right: 3upx solid #ccc;
	top: 0;
	left: 0;
}

.upload-image-view .add-view .cross .vertical-line {
	height: 48%;
	width: 100%;
	position: absolute;
	// border-bottom: 3upx solid #5A5A5A;
	border-bottom: 3upx solid #ccc;
	top: 0;
	left: 0;
}
</style>